<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>小会计财税管理系统-登录页面</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="小会计财税管理系统-登录页面">
<meta name="description" content="小会计财税管理系统-登录页面">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<style>
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.login-center {
    background: #fff;
    min-width: 38.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
#button {
  background-color: #33cabb; 
  border-left-color:#33cabb;
  border-right-color:#33cabb;
  border-top-color:#33cabb;
  border-bottom-color:#33cabb;
}
</style>
</head>
  
<body>
<div class="row lyear-wrapper" id="app">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <a > <img src="images/4.png" title="LightYear" alt="LightYear" /> </a>
      </div>
      <form action="#!" method="post">
        <div class="form-group has-feedback feedback-left">
          <input type="text" placeholder="请输入您的用户名" v-model="userd.userName" class="form-control" name="username" id="username" />
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input type="password" placeholder="请输入密码" v-model="userd.userPwd" class="form-control" id="password" name="password" />
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input type="text" name="yanzhengma" id="yanzhengma" class="form-control" style="float: left; width: 277px;" placeholder="请输入验证码"/>
          <img id="img_validate" src="http://localhost:8888/getImg_validate" style="float: left;" @click="reloadImg()" >
        </div>
        <div class="form-group">
          <el-button id="button" class="btn btn-block btn-primary" type="primary" style="width:100%;" @click.native.prevent="login" :loading="loading" >登录</el-button>
          <a  data-toggle="modal" data-target="#zhuce">立即注册</a>
          <a  data-toggle="modal" data-target="#pwd" style="float: right;">忘记密码</a>
        </div>
      </form>
      <hr>
      <form action=""  class="form-horizontal" role="form">
        <div class="modal fade" id="zhuce" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="margin-left: -166px;
                width: 900px;">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel" style="text-align: center;">
                          用户注册
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                    </div>
                    <el-steps :active="active" finish-status="success" style="    margin-left: 209px;
                    width: 500px;">
                      <el-step  title="验证邮箱"></el-step>
                      <el-step  title="用户信息"></el-step>
                      <!-- <el-step title="步骤 3"></el-step> -->
                    </el-steps>
                    <div class="modal-body" style="height: 100%;" id="email">
                        <div class="form-group">
                          <label for="lastname" class="col-sm-3 control-label">邮箱号</label>
                          <div class="col-sm-7">
                            <input class="form-control" type="text" v-model="userz.eMail" placeholder="邮箱号">
                          </div>
                      </div>
                      <div class="form-group">
                        <label for="lastname" class="col-sm-3 control-label">请输入验证码</label>
                        <div class="col-sm-7">
                          <input class="form-control" type="text" id="yzm"  style="float: left; width: 393px;" placeholder="请输入验证码">
                          <input type="button" class="btn btn-default" @click="getyzm" value="获取验证码" style="float: left;">
                        </div>
                    </div>
                    </div>
                    <div class="modal-body" style="height: 100%;" id="users">
                      <div class="form-group">
                        <label for="lastname" class="col-sm-3 control-label">用户名</label>
                        <div class="col-sm-7">
                          <input class="form-control" type="text" v-model="userz.userName" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                      <label for="lastname" class="col-sm-3 control-label">登录密码</label>
                      <div class="col-sm-7">
                        <input class="form-control" type="text" v-model="userz.userPwd" placeholder="登录密码">
                      </div>
                  </div>
                  <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">确认密码</label>
                    <div class="col-sm-7">
                      <input class="form-control" type="text"  placeholder="确认密码">
                    </div>
                </div>
                  </div>
                    <div class="modal-footer">
                        <el-button   type="success" style="float: left;"  id="xyb" @click="next">下一步</el-button>
                        <el-button  type="success" style="float: left;"  id="syb" @click="down">上一步</el-button>
                        <button type="button" class="btn btn-default" @click="error" data-dismiss="modal">关闭</button>
                        <el-button id="an" data-dismiss="modal"   type="success"  @click.native.prevent="zc" :loading="loading">提交</el-button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
      </form>
      <form action=""  class="form-horizontal" role="form">
        <div class="modal fade" id="pwd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="margin-left: -166px;
                width: 900px;">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel" style="text-align: center;">
                          找回密码
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                    </div>
                    <el-steps :active="active2" finish-status="success" style="    margin-left: 209px;
                    width: 500px;">
                      <el-step  title="身份验证"></el-step>
                      <el-step  title="登录密码重置"></el-step>
                      <el-step title="重置成功"></el-step>
                    </el-steps>

                    <div class="modal-body" style="height: 100%;" id="sfzs">
                        <div class="form-group">
                          <label for="lastname" class="col-sm-3 control-label">邮箱号</label>
                          <div class="col-sm-7">
                            <input class="form-control" type="text" v-model="userc.eMail" placeholder="邮箱号">
                          </div>
                      </div>
                    </div>
                    <div class="modal-body" style="height: 100%;" id="pwds">

                      <div class="form-group">
                        <label for="lastname" class="col-sm-3 control-label">请输入验证码</label>
                        <div class="col-sm-7">
                          <input class="form-control" type="text"  style="float: left; width: 393px;" placeholder="请输入验证码">
                          <input type="button" class="btn btn-default" value="获取验证码" style="float: left;">
                        </div>
                    </div>

                      <div class="form-group">
                        <label for="lastname" class="col-sm-3 control-label">登录密码</label>
                        <div class="col-sm-7">
                          <input class="form-control" type="text" v-model="userc.userPwd" placeholder="登录密码">
                        </div>
                    </div>
                    <div class="form-group">
                      <label for="lastname" class="col-sm-3 control-label">确认密码</label>
                      <div class="col-sm-7">
                        <input class="form-control" type="text"  placeholder="确认密码">
                      </div>
                  </div>

                  </div>
                  <div class="modal-body" style="height: 100%;" id="cjs">
                    <div class="form-group">
                      <img src="images/pwd.png" style="margin-left: 198px;">
                  </div>
                </div>
                    <div class="modal-footer">
                      <el-button   type="success" style="float: left;" id="xyb2" @click="next2">下一步</el-button>
                        <el-button  type="success" style="float: left;"  id="syb2" @click="down2">上一步</el-button>
                        <button type="button" class="btn btn-default" @click="error" data-dismiss="modal">关闭</button>
                        <el-button id="an2" data-dismiss="modal"  type="success"  @click.native.prevent="cz" :loading="loading">提交</el-button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

  <!-- <script src="vue js/vue/vue.min.js"></script>
  <script src="vue js/axios.min.js"></script> -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script>
    new Vue({
      el:"#app",
      data:{
        active: -1,
        active2: -1,
        userd:{},
        userz:{},
        userc:{},
        user:{
          eMail:"",
          getyzm:"",
          userName:"",
          userPwd:"",
          userPwd2:""
        },
        id:"",
        loading: false,
      },
      created () {
        this.next();
        this.next2();
      },
      methods: {
          pd(){
             alert($("#em").value())
          },
        //重置密码
        cz(){
            axios.post("http://localhost:8888/czs",this.userc)
            .then(res => {
              this.$message({
              message: '恭喜你，重置成功！！',
              type: 'success'
              });
            })
            .catch(err => {
              console.error(err); 
               this.$message.error('重置失败！！！');
            })
        },
        //注册
        zc(){
          // alert(JSON.stringify(this.userz))
            axios.post("http://localhost:8888/zhuces",this.userz)
            .then(res => {
              // alert(JSON.stringify(this.userz))
              this.$message({
              message: '恭喜你，注册成功！！',
              type: 'success'
              });
            })
            .catch(err => {
              console.error(err);
              this.$message.error('注册失败！！！');
            })

        },
        getyzm(){
            axios.post("http://localhost:8888/message",this.userz)
            .then(res => {
              console.log(res)
            })
            .catch(err => {
              console.error(err); 
            })
        },
          //注册
        next() {
        if (this.active++ > 2) this.active = 2;
        if(this.active == 0){
          $("#email").show();
          $("#users").hide();
          $("#syb").hide();
          $("#an").hide();
          
        }else if(this.active == 1){
          $("#email").hide();
          $("#users").show();
          $("#syb").show();
          $("#an").hide();
        }else if(this.active == 2){
          $("#an").show();
        }
        },
        down() {
        if (this.active-- < -1) this.active = -1;
        if(this.active == 0){
          $("#email").show();
          $("#users").hide();
          $("#an").hide();
        }else if(this.active == 1 ){
          $("#email").hide();
          $("#users").show();
          $("#an").hide();
        }else if(this.active == 2){
          $("#an").show();
        }
        },

       //忘记密码
        next2() {
        if (this.active2++ >= 3) this.active2 = 3;
        if(this.active2 == 0){
          $("#sfzs").show();
          $("#pwds").hide();
          $("#cjs").hide();
          $("#syb2").hide();
          $("#an2").hide();
        }
        else if(this.active2 == 1){
          $("#pwds").show();
          $("#sfzs").hide();
          $("#cjs").hide();
          $("#syb2").show();
          $("#an2").hide();
        }
        else if(this.active2 == 2){
          $("#pwds").hide();
          $("#sfzs").hide();
          $("#cjs").show();
          $("#syb2").show();
          $("#an2").hide();
        }else if(this.active2 == 3){
          $("#an2").show();
        }
        },
        down2() {
        if (this.active2-- <= -1) this.active2 = -1;
        if(this.active2 == 0){
          $("#sfzs").show();
          $("#pwds").hide();
          $("#cjs").hide();
          $("#syb2").hide();
          $("#an2").hide();
        }else if(this.active2 == 1 ){
          $("#pwds").show();
          $("#sfzs").hide();
          $("#cjs").hide();
          $("#syb2").show();
          $("#an2").hide();
        }else if(this.active2 == 2){
          $("#pwds").hide();
          $("#sfzs").hide();
          $("#cjs").show();
          $("#syb2").show();
          $("#an2").hide();
        }else if(this.active2 == 3){
          $("#an2").show();
        }
        },
        error(){
          this.active = -1,
          this.active2 = -1
        },
        reloadImg(){
          document.getElementById("img_validate").src="http://localhost:8888/getImg_validate";
          // path = "http://localhost:8888/getImg_validate";
          // $("#img_validate").attr("src",path);
        },
        login(){
          this.loading=true;
          setTimeout(() => {
          this.loading = false;
       
          axios.post("http://localhost:8888/userlogin",this.userd)
          .then(res => {
            // alert(JSON.stringify(res.data))
            window.localStorage.setItem("userid",res.data.userId);
            window.localStorage.setItem("username",res.data.userName);
           
            console.log(res.data)
            this.um=$("#username").val();
            this.pw=$("#password").val();
            if(this.um == "" || this.pw == ""){
                   alert("用户名或密码不能为空！！！")
            }else{
            if(res.data.userId == null){
              this.$message.error('登录失败！！！请重新登陆！！！');
            }else{
              this.$message({
              message: '恭喜你，登陆成功！！',
              type: 'success'
              });
              setTimeout(function(){
                location="index.html"
              }, 500);
            }
          }
          })
        }, 1000);
        }
      }
    })
  </script>

</body>

</html>